<% @page_title = "Lisa's notes. Have you said something nice today? Grousesocks." %>

<% @body_class = "notes" %>

<div id="profiles">
	<dl class="peep vcard">
		<dt class="fn">Lisa</dt>
		<dd class="avatar">
			<img alt=" " class="photo" height="" src="inc/img/avatar-lisa.jpg" width="" />
		</dd>
		<dd class="email">
			<a href="mailto:lisaherrod@gmail.com">lisaherrod@gmail.com</a>
		</dd>
		<dd class="url">
			<a href="http://scenariogirl.com">scenariogirl.com</a>
		</dd>
		<dd class="description">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras ipsum. Aliquam erat volutpat. Quisque dolor. Cras tempus viverra erat. Nullam at justo. Duis ullamcorper turpis eget mi. Sed cursus consectetuer diam. Nunc laoreet lacus ac lectus. Vestibulum enim mauris, pharetra vitae, elementum nec, porta vel, quam. Proin viverra.</p>
		</dd>
	</dl> <!-- // .peep .vcard -->
</div> <!-- // #profiles -->

<div id="notes">
	<form action="" id="add-note" method="post">
		<fieldset>
			<legend>Share</legend>
			<label for="note-text">
				<span>Send Lisa a happy message!</span>
				<input id="note-text" name="note-text" type="text" />
			</label>
			<label for="anonymity" id="label-anonymity">
				<input id="anonymity" name="anonymity" type="checkbox" />
				<span>Send <a href="#">Anonymously</a></span>
			</label>
			<input class="submit" type="submit" value="Send!" />
          </fieldset>
        </form> <!-- // #add-note -->

	<dl class="current-notes">
		<dt class="note char80b">
			<p>You're funny</p>
		</dt>
		<!-- Only shown on *my* page 
		<dd class="avatar">
			<a href="#"><img alt="Amanda" height="" src="inc/img/avatar-amanda.jpg" width="" /></a>
		</dd>
		-->
		<dd class="mark-note">
			<a href="#"><img alt="Mark note" height="" src="inc/img/mark-note.jpg" width="" /></a>
		</dd>
		<!-- Only shown on *my* page 
		<dd class="approve-note">
			<a href="#"><img alt="Approve note" height="" src="inc/img/approve-note.jpg" width="" /></a>
		</dd>
		-->
		<dd class="moderate-note">
			<a href="#"><img alt="Moderate note down" height="" src="inc/img/moderate-note.jpg" width="" /></a>
		</dd>
	</dl> <!-- // .current-notes -->
	
	<dl class="current-notes">
		<dt class="note char80b">
			<p>You are always so friendly to everyone and always in a good mood!</p>
		</dt>
		<!-- Only shown on *my* page 
		<dd class="avatar">
			<a href="#"><img alt="Amanda" height="" src="inc/img/avatar-amanda.jpg" width="" /></a>
		</dd>
		-->
		<dd class="mark-note">
			<a href="#"><img alt="Mark note" height="" src="inc/img/mark-note.jpg" width="" /></a>
		</dd>
		<!-- Only shown on *my* page 
		<dd class="approve-note">
			<a href="#"><img alt="Approve note" height="" src="inc/img/approve-note.jpg" width="" /></a>
		</dd>
		-->
		<dd class="moderate-note">
			<a href="#"><img alt="Moderate note down" height="" src="inc/img/moderate-note.jpg" width="" /></a>
		</dd>
	</dl> <!-- // .current-notes -->
	
	<dl class="current-notes">
		<dt class="note char80b">
			<p>You're so smart</p>
		</dt>
		<!-- Only shown on *my* page 
		<dd class="avatar">
			<a href="#"><img alt="Amanda" height="" src="inc/img/avatar-amanda.jpg" width="" /></a>
		</dd>
		-->
		<dd class="mark-note">
			<a href="#"><img alt="Mark note" height="" src="inc/img/mark-note.jpg" width="" /></a>
		</dd>
		<!-- Only shown on *my* page 
		<dd class="approve-note">
			<a href="#"><img alt="Approve note" height="" src="inc/img/approve-note.jpg" width="" /></a>
		</dd>
		-->
		<dd class="moderate-note">
			<a href="#"><img alt="Moderate note down" height="" src="inc/img/moderate-note.jpg" width="" /></a>
		</dd>
	</dl> <!-- // .current-notes -->
			
</div> <!-- // #notes -->

<form action="" id="find-friends" method="post">
	<fieldset>
		<legend>Find more Friends</legend>
		<label for="friendname">
			<span>Type your friend's name</span>
			<input id="friendname" name="friendname" type="text" />
		</label>
		<input class="submit" type="submit" value="Find" />
        </fieldset>
      </form> <!-- // #find-friends -->